<template>
	<view>
		<view class="formbox">
			<view class="formbox-item1">
				<view class="title">店名</view>
				<view class="value">
					<input type="text" v-model="name" placeholder-class="placeholderClass" placeholder="请输入店名" />
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">负责人姓名</view>
				<view class="value">
					<input type="text" v-model="adminName" placeholder-class="placeholderClass"
						placeholder="请输入负责人姓名" />
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">负责人电话</view>
				<view class="value">
					<input type="number" v-model="adminPhone" placeholder-class="placeholderClass"
						placeholder="请输入负责人电话" />
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">所在地区</view>
				<view class="value">
					<region-picker @change="region_change" class="pickerbox" jsonPath="All">
						<view class="picker">
							<input disabled="disable" class="uni-input" placeholder-class="placeholderClass"
								placeholder="请选择省、市、区" v-model="areaCity" />
						</view>
					</region-picker>
					<image class="right" src="../../static/usercenter/icon_zk.png"></image>
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">地址</view>
				<view class="value">
					<input type="text" v-model="address" placeholder-class="placeholderClass" placeholder="请填写地址" />
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">营业执照</view>
				<view class="addbox" @click="upload(1)">
					<view class="add-icon2" v-if="licenseUrl">
						<image :src="licenseUrl"></image>
					</view>
					<view class="add-icon" v-else>
						<image mode="aspectFill" src="../../static/add-icon.png"></image>
					</view>
					<view class="add-text" v-if="!licenseUrl">立即上传</view>
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">环境照片</view>
				<view class="imgbox">
					<!-- <image class="icon01" v-if="imgUrl" :src="imgUrl"></image>
					<image class="icon02" src="../../static/add-icon.png"></image> -->
					<image-drag-sort :list="images" @imageList='imageList'></image-drag-sort>
				</view>
			</view>
		</view>
		<view class="fiexd-btn" @click="dosubmit">
			<button>提交</button>
		</view>
	</view>
</template>

<script>
	import regionPicker from "@/components/region-picker/region-picker.vue"
	import imageDragSort from "@/components/image-drag-sort/index.vue"

	export default {
		components: {
			regionPicker,
			imageDragSort
		},
		data() {
			return {
				provinceId: '',
				areaId: '',
				cityId: '',
				areaCity: '',
				name: '',
				address: '',
				pname: '',
				cname: '',
				aname: '',
				license: '',
				licenseUrl: '',
				img: '',
				imgUrl: '',
				adminName: '',
				adminPhone: '',
				images: [],
				uploadImages: []


			}
		},
		methods: {


			imageList(list) {

				this.images = list;
				console.info("====list======" + JSON.stringify(this.images));
			},
			uploadList() {


				let that = this;
				console.info("===uploadList images=====" + JSON.stringify(this.images));

				for (var i = 0; i < this.images.length; i++) {
					uni.uploadFile({
						url: 'https://bs.50xue.com/api/common/upload', //仅为示例，非真实的接口地址
						filePath: that.images[i],
						name: 'file',
						success: (uploadFileRes) => {
							var res = uploadFileRes.data;
							// 根据接口具体返回格式   赋值具体对应url
							var url = JSON.parse(res).data.fullurl;
							var uploadUrl = JSON.parse(res).data.url;
							that.uploadImages.push(uploadUrl);
							if(that.uploadImages.length == that.images.length){
								that.doAddProfile();
							}
						}
					});
				}

			},
			upload(type) {

				let that = this;
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// 若多选，需循环调用uni.uploadFile ，因微信小程序只支持单文件上传
						uni.uploadFile({
							url: 'https://bs.50xue.com/api/common/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								var res = uploadFileRes.data;

								// 根据接口具体返回格式   赋值具体对应url
								var url = JSON.parse(res).data.fullurl;

								var uploadUrl = JSON.parse(res).data.url;

								if (type == 1) {
									that.licenseUrl = url;
									that.license = uploadUrl;
								} else {
									that.imgUrl = url;
									that.img = uploadUrl;
								}


							}
						});
					}
				});
			},

			dosubmit() {

				if (this.name == '') {
					this.$util.$showToast('商家名不能为空', '', 'none');
					return;
				}
				if (this.address == '') {
					this.$util.$showToast('地址不能为空', '', 'none');
					return;
				}
				if (this.license == '') {
					this.$util.$showToast('营业执照不能为空', '', 'none');
					return;
				}
				console.info("==list===" + this.lists);
				console.info("==list===" + JSON.stringify(this.images));
				if (this.images.length == 0) {
					this.$util.$showToast('环境图片不能为空', '', 'none');
					return;
				}
				if (this.images.length > 5) {
					this.$util.$showToast('环境图片不能超过5张', '', 'none');
					return;
				}

				this.uploadList();




			},

			doAddProfile() {


				console.info("===uploadList===" + JSON.stringify(this.uploadImages))

				let param = {
					name: this.name,
					pid: this.provinceId,
					cid: this.cityId,
					aid: this.areaId,
					address: this.address,
					pname: this.pname,
					aname: this.aname,
					cname: this.cname,
					license: this.license,
					img: this.img,
					adminName: this.adminName,
					adminPhone: this.adminPhone,
					images: JSON.stringify(this.uploadImages)
				}
				let that = this;
				
				this.$api.addprofile(param).then(res => {

					if (res.code == 1) {

						uni.navigateBack({
							delta: 1
						})
					} else {
						that.$util.$showToast(res.msg, '', 'none');

					}
				})
			},

			region_change(e) {
				console.log("=============");
				console.log(e);
				let code = e.detail.code;
				let value = e.detail.value;
				let id = e.detail.id;
				this.provinceId = id[0];
				this.cityId = id[1];
				this.areaId = id[2];
				this.areaCity = value[0] + value[1] + value[2];
				this.pname = value[0];
				this.cname = value[1];
				this.aname = value[2];

			}
		}
	}
</script>

<style lang="scss">
	.formbox {
		padding-bottom: 220rpx;

		.formbox-item1 {
			margin: 0 40rpx;
			padding: 35rpx 0;
			border-bottom: 1rpx solid #e0e0e0;

			.title {
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 54rpx;
			}

			.addbox {
				width: 650rpx;
				height: 291rpx;
				background: #F8F8F8;
				border-radius: 10rpx;
				text-align: center;

				.add-icon {
					padding-top: 60rpx;

					image {
						width: 110rpx;
						height: 110rpx;
						margin-bottom: 32rpx;
					}
				}

				.add-icon2 {
					image {
						width: 650rpx;
						height: 291rpx;
					}
				}

				.add-text {
					color: #12ADA9;
					font-size: 28rpx;
				}
			}

			.imgbox {
				background: #F8F8F8;

				border-radius: 10rpx;
				text-align: center;

				.icon01 {
					width: 160rpx;
					height: 160rpx;
				}

				.icon02 {
					width: 60rpx;
					height: 60rpx;
					margin: 50rpx 0;
				}
			}

			.value {
				display: flex;

				.pickerbox {
					font-size: 28rpx;
					color: #BFBFBF;
					flex: auto;
				}

				input {
					font-size: 28rpx;
					color: #BFBFBF;
					flex: auto;
				}

				.right {
					width: 36rpx;
					height: 36rpx;
				}
			}

		}

		.formbox-item1:last-child {
			border-bottom: 0rpx;
		}
	}
</style>
